<template>
	<view :style="$s.view_color">
		<my-navbar :name="nav_title" bgColor="#E1251B" fontColor="#FFF"></my-navbar>
		  <view class="flex-col">
			<view class="flex-col justify-start balance-section">
			  <view class="flex-col justify-start balance-container">
				<view class="flex-col items-center balance-info space-y-51">
				  <text class="balance-label">我的余额（元）</text>
				  <text class="balance-amount">{{balance}}</text>
				  <text class="balance-note">预充值越多赠送越多</text>
				</view>
			  </view>
			</view>
			<text class="recharge-title">- 余额充值 -</text>
		  </view>
		  <view class="recharge-options">
			<view class="flex-col items-center option-item space-y-10" @click="select(item,index)" :class="index==sindex?'selected':''" v-for="(item,index) in list" :key='index'>
			  <view class="option-price">￥{{item.price}}</view>
			  <view class="option-bonus" v-if="item.give_price>0">赠送 <text>¥{{item.give_price}}</text></view>
			</view>
			<view class="flex-col items-center option-item space-y-10" @click="select(-1)" :class="sindex===-1?'selected':''">
				<input type="number" :value="otherNumber" placeholder="其他" class="input-other-amount" @input="inputChange"/>
			</view>
		  </view>
		  <view class="recharge-tips">{{tips}}</view>
		  <view class="flex-col justify-start items-center recharge-button" @click="recharge"><text class="recharge-text">立即充值</text></view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import $pay from '@/common/pay.js'
	import $user from '@/common/user.js'
	import checkLogin from '@/mixins/loginCheck.js'
	export default {
		mixins:[checkLogin],
		data() {
			return {
				nav_title:"余额充值",
				list:[],
				sindex:-2,
				post:{
					price:0,
				},
				otherNumber:'',
				balance:'0.00',
				tips:'充值金额不支持提现，仅用于平台消费使用，最终解释权归本平台',
			};
		},
		watch: {
		},
		computed:{
			...mapState({
				userInfo:state => state.$userInfo,
			}),
		},
		onLoad() {
			this.getRechargeList();
		},
		onShow() {

		},
		methods: {
			// 充值选项
			getRechargeList(){
				uni.$u.api.rechargeList().then(res=>{
					this.list=res.data.list;
					this.balance=res.data.user.now_money;
				});
			},
			select(item,index){
				if(item===-1){
					this.sindex=-1;
					this.post.price=-1;
				}else{
					this.sindex=index;
					this.post.price=item.price;
				}
			},
			//点击立即充值
			recharge(){
				if(this.sindex===-2){
					this.$c.error('请选择或输入充值金额');
				}else if(this.sindex===-1 && this.post.price<=0){
					this.$c.error('充值金额必须大于0');
				}else{
					this.$u.api.rechargePay(this.post).then(res=>{
						$pay.toWxPay(res.data).then(payres=>{
							//更新用户信息
							$user.getUser(true);
							this.$c.success('充值成功！','index/user');
						}).catch(e=>{
							if(e!="cancel"){
								this.$c.info(e);
							}
						})
					});	
				}
			},
			inputChange(e){
				this.post.price=e.detail.value;
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import url("@/static/css/codefun.css");
	.page {
	  padding-top: 165rpx;
	  background-color: #ffffff;
	  width: 100%;
	  overflow-y: auto;
	  overflow-x: hidden;
	  height: 100%;
	}
	.balance-section {
	  padding: 30rpx 0 40rpx;
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	}
	.balance-container {
	  margin: 0 30rpx;
	}
	.balance-info {
	  padding: 70rpx 0 48rpx;
	  background-image: linear-gradient(#e45656,#E1251B);
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	  border-radius: 14rpx;
	}
	.space-y-51 > view:not(:first-child),
	.space-y-51 > text:not(:first-child),
	.space-y-51 > image:not(:first-child) {
	  margin-top: 51rpx;
	}
	.balance-label {
	  color: #ffffff;
	  font-size: 32rpx;
	  line-height: 31rpx;
	}
	.balance-amount {
	  color: #ffffff;
	  font-size: 114rpx;
	  line-height: 78rpx;
	}
	.balance-note {
	  color: #ffffff;
	  font-size: 24rpx;
	  line-height: 24rpx;
	}
	.recharge-title {
	  color: #686868;
	  font-size: 26rpx;
	  line-height: 25rpx;
	  text-align: center;
	  margin: 20rpx 0 30rpx;
	}
	.recharge-options {
	  margin: 33rpx 40rpx;
	  height: auto;
	  display: grid;
	  grid-template-columns: repeat(3, 1fr);
	  row-gap: 35rpx;
	  column-gap: 43rpx;
	}
	.option-item {
	  padding: 36rpx 0;
	  background-color: #FFF7F7;
	  border-radius: 10rpx;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}
	.space-y-10 > view:not(:first-child),
	.space-y-10 > text:not(:first-child),
	.space-y-10 > image:not(:first-child) {
	  margin-top: 10rpx;
	}
	.option-price {
	  font-size: 40rpx;
	  line-height: 30rpx;
	  color: #E1251B;
	}
	.option-bonus {
	  font-size : 22rpx;
	  line-height: 30rpx;
	  color: #aaaaaa;
	  text{
		  margin-left: 6rpx;
		  font-size : 30rpx ;
	  }
	}
	.recharge-tips {
	  margin: 20rpx 40rpx;
	  color: #919191;
	  font-size: 22rpx;
	  line-height: 36rpx;
	}
	.recharge-button {
		width: 100%;
		position: fixed;
		bottom:0rpx;
		padding: 32rpx 0 36rpx;
		color: #FFF;
		background-color: #E1251B;
	}
	.recharge-text {
	  color: #ffffff;
	  font-size: 34rpx;
	  line-height: 32rpx;
	}
	.selected{
		background-color: #E1251B;
	}
	.selected .option-price,.selected .option-bonus,.selected .input-other-amount{
		color: #ffffff;
	}
	.recharge-options .input-other-amount{
		font-size: 36rpx;
		text-align: center;
		padding: 20rpx;
	}
	.swiper-box{
		padding: 20rpx 40rpx 150rpx 40rpx;
	}
</style>
